<template>
	<div>
		<!-- <el-card class="box-card">
			<div slot="header" class="clearfix">
				<span>备份信息</span>
			</div>
			<div>
				<DataBaseTable :tableColumns="backUpTableColumns" :tableData="itemData.back ? itemData.back : []">
					<template v-slot="{ scope, item }">
						<template v-if="item.format == 'DATESPAN_HH'">
							<div v-if="scope.row[item.prop] == '无监控数据'">
								<el-tag type="warning" size="mini" effect="plain">{{
                  scope.row[item.prop]
                }}</el-tag>
							</div>
							<div v-else>
								{{ scope.row[item.prop] + "&nbsp;小时前" }}
							</div>
						</template>
						<template v-else-if="item.format == 'MB'">
							<div>
								{{
                  scope.row[item.prop]
                    ? scope.row[item.prop] + "&nbsp;MB"
                    : scope.row[item.prop]
                }}
							</div>
						</template>
						<template v-else-if="item.format == 'STATUS'">
							<div v-if="scope.row[item.prop] == 'COMPLETED'">
								<el-tag type="success" size="mini" effect="plain">{{
                  scope.row[item.prop]
                }}</el-tag>
							</div>
							<div v-else-if="scope.row[item.prop] == 'FAILED'">
								<el-tag type="danger" size="mini" effect="plain">{{
                  scope.row[item.prop]
                }}</el-tag>
							</div>
							<div v-else>
								{{ scope.row[item.prop] }}
							</div>
						</template>
						<template v-else-if="item.format == 'STARTTIME'">
							<div>
								{{ scope.row[item.prop] | createTime }}
							</div>
						</template>
						<template v-else>
							<div>
								{{ scope.row[item.prop] }}
							</div>
						</template>
					</template>
				</DataBaseTable>
			</div>
		</el-card> -->
		<DataBaseLineChart :LineData="all" @getUrl="getDBInfo">
		</DataBaseLineChart>
		<div class="tableBox">
			<div class="titleBox">告警信息</div>
			<div style="width: 95%;margin: 15px auto;">
				<template>
					<el-table :data="alertList" style="width: 100%" height="250" border>
						<el-table-column type="index" width="50" fixed label="序号" align="center">
						</el-table-column>
						<el-table-column prop="type" label="系统类型" width="80" align="center">
						</el-table-column>
						<el-table-column prop="alertLevel" label="告警级别" width="80" align="center">
							<template slot-scope="scope">
								<div v-if="scope.row.alertLevel == 1">
									<div class="tipBox1">提醒</div>
								</div>
								<div v-if="scope.row.alertLevel == 2">
									<div class="tipBox2">普通</div>
								</div>
								<div v-if="scope.row.alertLevel == 3">
									<div class="tipBox3">紧急</div>
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="infotype" label="信息类型" width="150" align="center">
						</el-table-column>
						<el-table-column prop="alertinfo" label="告警信息" width="150" align="center">
						</el-table-column>
						<el-table-column prop="recordTime" label="录入时间" width="135" align="center">
							<template slot-scope="scope">
								{{changeTime(scope.row.recordTime)}}
							</template>
						</el-table-column>
						<el-table-column prop="servicesname" label="业务系统名" width="100" align="center">
						</el-table-column>
						<el-table-column prop="systemname" label="系统名称" width="100" align="center">
						</el-table-column>
					<!-- 	<el-table-column prop="monObject" label="告警对象" width="100" align="center">
						</el-table-column> -->
					</el-table>
				</template>
			</div>
		</div>
		<div class="tableBox">
			<div class="titleBox">文件类型io</div>
			<div style="width: 95%;margin: 15px auto;">
				<template>
					<el-table :data="file_ioList" style="width: 100%" height="250" border>
						<el-table-column type="index" width="50" fixed label="序号" align="center">
						</el-table-column>
						<el-table-column prop="filetypeName" width="110" align="center">
							<template slot="header">
							    <div>文件类型名</div>
								<div>(filetypeName)</div>
							</template>
						</el-table-column>
						<el-table-column prop="filetypeId" width="110" align="center">
							<template slot="header">
							    <div>文件类型ID</div>
								<div>(filetpyeName)</div>
							</template>
						</el-table-column>
						<el-table-column prop="functionName" width="110" align="center">
							<template slot="header">
							    <div>后台进程名</div>
								<div>(functionName)</div>
							</template>
						</el-table-column>
						<el-table-column prop="functionId" width="100" align="center">
							<template slot="header">
							    <div>后台进程ID</div>
								<div>(functionId)</div>
							</template>
						</el-table-column>
						<el-table-column prop="avgReadmbSec" width="120" align="center">
							<template slot="header">
							    <div>平均读取时间(秒)</div>
								<div>(avgReadmbSec)</div>
							</template>
						</el-table-column>
						<el-table-column prop="avgWritembSec" width="120" align="center">
							<template slot="header">
							    <div>平均写入时间(秒)</div>
								<div>(avgWritembSec)</div>
							</template>
						</el-table-column>
						<el-table-column prop="timeSpanSec" width="120" align="center">
							<template slot="header">
							    <div>时间跨度(秒)</div>
								<div>(timeSpanSec)</div>
							</template>
						</el-table-column>
						<el-table-column prop="readMegabytes" width="120" align="center">
							<template slot="header">
							    <div>读取大小</div>
								<div>(readMegabytes)</div>
							</template>
						</el-table-column>
						<el-table-column prop="avgWaitMs" width="120" align="center">
							<template slot="header">
							    <div>平均IO等待时间(ms)</div>
								<div>(avgWaitMs)</div>
							</template>
						</el-table-column>
						<el-table-column prop="writeMegabytes" width="120" align="center">
							<template slot="header">
							    <div>写入大小</div>
								<div>(writeMegabytes)</div>
							</template>
						</el-table-column>
						<el-table-column prop="recordTime" label="记录时间" width="150" align="center">
							<template slot-scope="scope">
								{{changeTime(scope.row.recordTime)}}
							</template>
						</el-table-column>
					</el-table>
				</template>
			</div>
		</div>
		<div class="tableBox">
			<div class="titleBox">读写io</div>
			<div style="width: 95%;margin: 15px auto;">
				<template>
					<el-table :data="write_read_ioList" style="width: 100%" height="250" border>
						<el-table-column type="index" width="50" fixed label="序号" align="center">
						</el-table-column>
						<el-table-column prop="beginSnapid" width="110" align="center">
							<template slot="header">
							    <div>快照起始ID</div>
								<div>(beginSnapid)</div>
							</template>
						</el-table-column>
						<el-table-column prop="endSnapid" width="110" align="center">
							<template slot="header">
							    <div>快照结束ID</div>
								<div>(endSnapid)</div>
							</template>
						</el-table-column>
						<el-table-column prop="functionName" width="110" align="center">
							<template slot="header">
							    <div>后台进程名</div>
								<div>(functionName)</div>
							</template>
						</el-table-column>
						<el-table-column prop="functionId" width="100" align="center">
							<template slot="header">
							    <div>后台进程ID</div>
								<div>(functionId)</div>
							</template>
						</el-table-column>
						<el-table-column prop="avgReadmbSec" width="120" align="center">
							<template slot="header">
							    <div>平均读取时间(秒)</div>
								<div>(avgReadmbSec)</div>
							</template>
						</el-table-column>
						<el-table-column prop="avgWritembSec" width="120" align="center">
							<template slot="header">
							    <div>平均写入时间(秒)</div>
								<div>(avgWritembSec)</div>
							</template>
						</el-table-column>
						<el-table-column prop="timeSpanSec" width="120" align="center">
							<template slot="header">
							    <div>时间跨度(秒)</div>
								<div>(timeSpanSec)</div>
							</template>
						</el-table-column>
						<el-table-column prop="readMegabytes" width="120" align="center">
							<template slot="header">
							    <div>读取大小(MB)</div>
								<div>(readMegabytes)</div>
							</template>
						</el-table-column>
						<el-table-column prop="avgWaitMs" width="120" align="center">
							<template slot="header">
							    <div>平均IO等待时间(ms)</div>
								<div>(avgWaitMs)</div>
							</template>
						</el-table-column>
						<el-table-column prop="writeMegabytes" width="120" align="center">
							<template slot="header">
							    <div>写入大小</div>
								<div>(writeMegabytes)</div>
							</template>
						</el-table-column>
						<el-table-column prop="recordTime" label="记录时间" width="150" align="center">
							
						</el-table-column>
					</el-table>
				</template>
			</div>
		</div>
		<div class="tableBox1">
			<div class="titleBox">SQL</div>
			<div style="width: 95%;margin: 15px auto;">
				<template>
					<el-table :data="sqlList" style="width: 100%" height="400" border>
						<el-table-column type="index" width="50" fixed label="序号" align="center">
						</el-table-column>
						<el-table-column prop="username" width="110" align="center">
							<template slot="header">
							    <div>会话使用用户名</div>
								<div>(username)</div>
							</template>
						</el-table-column>
						<el-table-column prop="status" width="110" align="center">
							<template slot="header">
							    <div>会话状态</div>
								<div>(status)</div>
							</template>
						</el-table-column>
						<el-table-column prop="module" width="110" align="center">
							<template slot="header">
							    <div>程序模块名</div>
								<div>(module)</div>
							</template>
						</el-table-column>
						<el-table-column prop="program" width="110" align="center">
							<template slot="header">
							    <div>程序名</div>
								<div>(program)</div>
							</template>
						</el-table-column>
						<el-table-column prop="functionId" width="100" align="center">
							<template slot="header">
							    <div>后台进程ID</div>
								<div>(functionId)</div>
							</template>
						</el-table-column>
						<el-table-column prop="sqlExecStart" width="120" align="center">
							<template slot="header">
							    <div>开始执行时间</div>
								<div>(sqlExecStart)</div>
							</template>
						</el-table-column>
						<el-table-column prop="bindsXml" width="120" align="center">
							<template slot="header">
							    <div>绑定变量信息</div>
								<div>(bindsXml)</div>
							</template>
						</el-table-column>
						<el-table-column prop="elapsedTime" width="120" align="center">
							<template slot="header">
							    <div>已执行时间</div>
								<div>(elapsedTime)</div>
							</template>
						</el-table-column>
						<el-table-column prop="cpuTime" width="120" align="center">
							<template slot="header">
							    <div>CPU消耗时间</div>
								<div>(cpuTime)</div>
							</template>
						</el-table-column>
						<el-table-column prop="userIoWaitTime" width="120" align="center">
							<template slot="header">
							    <div>IO等待消耗时间</div>
								<div>(userIoWaitTime)</div>
							</template>
						</el-table-column>
						<el-table-column prop="applicationWaitTime" width="120" align="center">
							<template slot="header">
							    <div>APP类型事件等待时间</div>
								<div>(applicationWaitTime)</div>
							</template>
						</el-table-column>
						<el-table-column prop="clusterWaitTime" width="130" align="center">
							<template slot="header">
							    <div>集群类型等待事件消耗时间</div>
								<div>(clusterWaitTime)</div>
							</template>
						</el-table-column>
						<el-table-column prop="bufferGets" width="120" align="center">
							<template slot="header">
							    <div>缓存读数量</div>
								<div>(bufferGets)</div>
							</template>
						</el-table-column>
						<el-table-column prop="diskReads" width="120" align="center">
							<template slot="header">
							    <div>磁盘写数量</div>
								<div>(diskReads)</div>
							</template>
						</el-table-column>
						<el-table-column prop="readGbytes" width="120" align="center">
							<template slot="header">
							    <div>IO总计读取</div>
								<div>(readGbytes)</div>
							</template>
						</el-table-column>
						<el-table-column prop="recordTime" width="120" align="center">
							<template slot="header">
							    <div>记录采集时间</div>
								<div>(recordTime)</div>
							</template>
						</el-table-column>
						<el-table-column prop="port" width="120" align="center">
							<template slot="header">
							    <div>会话连接相关端口</div>
								<div>(port)</div>
							</template>
						</el-table-column>
						<el-table-column prop="machine" width="120" align="center">
							<template slot="header">
							    <div>主机名</div>
								<div>(machine)</div>
							</template>
						</el-table-column>
						<el-table-column prop="ip" width="120" align="center">
							<template slot="header">
							    <div>客户端主机IP</div>
								<div>(ip)</div>
							</template>
						</el-table-column>
						<el-table-column prop="proctype" width="120" align="center">
							<template slot="header">
							    <div>程序类型</div>
								<div>(proctype)</div>
							</template>
						</el-table-column>
						<el-table-column prop="event" width="120" align="center">
							<template slot="header">
							    <div>等待事件</div>
								<div>(event)</div>
							</template>
						</el-table-column>
						
						<el-table-column prop="errorMessage" width="130" align="center">
							<template slot="header">
							    <div>会话返回的错误信息</div>
								<div>(errorMessage)</div>
							</template>
						</el-table-column>
						<el-table-column prop="recordTime" label="记录时间" width="150" align="center">
						</el-table-column>
					</el-table>
				</template>
			</div>
		</div>
		<div class="tableBox1">
			<div class="titleBox">TopWait</div>
			<div style="width: 95%;margin: 15px auto;">
				<template>
					<el-table :data="topwaitList" style="width: 100%" height="400" border>
						<el-table-column type="index" width="50" fixed label="序号" align="center">
						</el-table-column>
						<el-table-column prop="beginSnapid" width="110" align="center">
							<template slot="header">
							    <div>开始快照ID</div>
								<div>(beginSnapid)</div>
							</template>
						</el-table-column>
						<el-table-column prop="endSnapid" width="110" align="center">
							<template slot="header">
							    <div>结束快照ID</div>
								<div>(endSnapid)</div>
							</template>
						</el-table-column>
						<el-table-column prop="eventName" width="110" align="center">
							<template slot="header">
							    <div>等待事件名称</div>
								<div>(eventName)</div>
							</template>
						</el-table-column>
						<el-table-column prop="waitClass" width="110" align="center">
							<template slot="header">
							    <div>等待事件类型</div>
								<div>(waitClass)</div>
							</template>
						</el-table-column>
						<el-table-column prop="waitTimeSec" width="110" align="center">
							<template slot="header">
							    <div>等待时间(秒)</div>
								<div>(waitTimeSec)</div>
							</template>
						</el-table-column>
						<el-table-column prop="pctdbtime" width="120" align="center">
							<template slot="header">
							    <div>占用DBTIME百分比</div>
								<div>(pctdbtime)</div>
							</template>
						</el-table-column>
						<el-table-column prop="recordTime" label="记录时间" width="140" align="center">
							<template slot-scope="scope">
								{{changeTime(scope.row.recordTime)}}
							</template>
						</el-table-column>
					</el-table>
				</template>
			</div>
		</div>
	</div>
</template>

<script>
	import DataBaseTable from "./DbBackup.vue";
	import moment from "moment";
	import backUpTableColumns from "./DbBackupColumns.js";
	import ioTableColumns from "./DbIoTableColumns";
	import sessionTableColumns from "./DbSessionTableColumns.js";
	import DBTimeColumns from "./DbDBTimeColumns.js";
	import DataBaseLineChart from './DataBaseLineChart.vue';
	export default {
		props: ["itemData"],
		components: {
			DataBaseTable,
			DataBaseLineChart,
		},
		filters: {
			createTime(value) {
				return moment(value).format("YYYY-MM-DD HH:mm:ss");
			},
		},
		data() {
			return {
				tableData: [],
				all: {
					dbTimeList: [],
					dbValueList: [],
					ioTimeList: [],
					ioReadList: [],
					ioWriteList: [],
					sessionTimeLits: [],
					sessionAllList: [],
					sessionNowList: [],
				},
				ip: '',
				alertList: [],
				topwaitList:[],
				file_ioList:[],
				sqlList:[],
				write_read_ioList:[],
				backUpTableColumns: backUpTableColumns,
				ioTableColumns: ioTableColumns,
				sessionTableColumns: sessionTableColumns,
				DBTimeColumns: DBTimeColumns,
			};
		},
		created() {},
		mounted() {
			this.getData()
		},
		
		methods: {
			changeTime(timestamp) {
				let date = new Date(parseInt(timestamp));
				let Year = date.getFullYear();
				let Moth = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
				let Day = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate());
				let Hour = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours());
				let Minute = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
				let Sechond = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
				return Year + '-' + Moth + '-' + Day + ' ' + Hour + ':' + Minute + ':' + Sechond;
			},
			getData() {
				this.topwaitList = this.itemData.topwait
				this.alertList = this.itemData.alert
				this.write_read_ioList = this.itemData.write_read_io
				this.file_ioList = this.itemData.file_io
				this.sqlList = this.itemData.sql
				// this.ip = this.itemData.ip
				let dbtime = this.itemData.dbtime
				let io = this.itemData.total_io
				let session = this.itemData.session
				if (dbtime.length > 0) {
					dbtime.forEach((item, index) => {
						this.all.dbTimeList.push(item.recordTime)
						this.all.dbValueList.push(item.dbtime)
					})
				}
				if (io.length > 0) {
					io.forEach((item, index) => {
						this.all.ioTimeList.push(item.recordTime)
						this.all.ioReadList.push(item.readMegabytes)
						this.all.ioWriteList.push(item.writeMegabytes)
					})
				}
				if (session.length > 0) {
					session.forEach((item, index) => {
						this.all.sessionTimeLits.push(item.recordTime)
						this.all.sessionAllList.push(item.allSession)
						this.all.sessionNowList.push(item.activeSession)
					})
				}
			},
			getDBInfo(value) {
				value.ip = this.itemData.ip
				this.$emit('imgList', value)
			},
		},
	};
</script>

<style lang="scss" scoped>
	.box-card {
		margin-bottom: 15px;
	}

	.titleBox {
		height: 60px;
		font-size: 20px;
		font-weight: bold;
		margin: 15px 0px 15px 20px;
		line-height: 60px;
	}

	.tipBox1 {
		margin: 0 auto;
		width: 50px;
		background-color: #67C23A;
		height: 25px;
		line-height: 25px;
		border-radius: 5px;
		color: white;
	}

	.tipBox2 {
		margin: 0 auto;
		width: 50px;
		background-color: #E6A23C;
		height: 25px;
		line-height: 25px;
		border-radius: 5px;
		color: white;
	}

	.tipBox3 {
		margin: 0 auto;
		width: 50px;
		background-color: #F56C6C;
		height: 25px;
		line-height: 25px;
		border-radius: 5px;
		color: white;
	}

	.tableBox {
		margin: 10px auto;
		width: 100%;
		height: 350px;
		background-color: white;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
	}
	.tableBox1 {
		margin: 10px auto;
		width: 100%;
		height: 500px;
		background-color: white;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
	}
</style>
